<template>
  <div class="listScrollbar flex-row">
    <div class="listItem btn col-f 
             dis-flex flex-x-center flex-y-center" @click="chooseTab(item, index)" v-for="item, index in tabTist" :class="{ active: curentId == item.category_id }">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup name="tabs">
defineProps({
  title: {
    type: String,
    default: "",
  },
  tabTist: {
    type: Array,
    default: [],
  },
  curentId:{
    type: String ,
    default: "",
  }
});
const emit = defineEmits(["change"]);
const selectTypeTab = ref(0);
function chooseTab(item, index) {
  selectTypeTab.value = index;
  emit("change", item);
}
</script>

<style lang="scss" scoped>
.listScrollbar {
  
  width: 100%;

  .listItem {
    height: 100%;
    padding: 0.1rem 0.2rem;
    font-size: 0.15rem;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-right: 0.2rem;
  
    background: #E5E5E5;
    color: #333333;
    cursor: pointer;
    align-self: start;

    &.active {
      background: #134B9F;
      color: #ffffff;
        
    }
  }
}
</style>